import React, { useEffect } from 'react'
import { observer, useLocalObservable } from 'mobx-react'
import { SafeArea } from 'antd-mobile'
import Store from './store'
import styles from './index.module.less'

const PostMatch = () => {
    const store = useLocalObservable(() => new Store())
    const { matchInfo, getMatchInfo } = store

    useEffect(() => {
        document.title = '岗位匹配表'

        getMatchInfo()
    }, [])

    return (
        <div className={styles.postmatch}>
            <div className={styles.container}>
                <div className={styles.box}>
                    <div className={styles.head}>职位信息</div>
                    <div className={styles.content}>
                        <div className={styles.horizontal}>
                            <div className={styles.label}>单位名称</div>
                            <div className={styles.text}>{matchInfo.company_name || '暂无'}</div>
                        </div>
                        <div className={styles.horizontal}>
                            <div className={styles.label}>岗位</div>
                            <div className={styles.text}>{matchInfo.profession_name || '暂无'}</div>
                        </div>
                        <div className={styles.horizontal}>
                            <div className={styles.label}>单位性质</div>
                            <div className={styles.text}>{!matchInfo.company_type || matchInfo.company_type === '0' ? '暂无' : matchInfo.company_type}</div>
                        </div>
                        <div className={styles.horizontal}>
                            <div className={styles.label}>单位地址</div>
                            <div className={styles.text}>{matchInfo.company_address || '暂无'}</div>
                        </div>
                        <div className={styles.horizontal}>
                            <div className={styles.label}>招聘信息来源</div>
                            <div className={styles.text}>{matchInfo.source_type_name || '暂无'}</div>
                        </div>
                        <div className={styles.horizontal}>
                            <div className={styles.label}>联系人姓名</div>
                            <div className={styles.text}>{matchInfo.contact_name || '暂无'}</div>
                        </div>
                        <div className={styles.horizontal}>
                            <div className={styles.label}>联系人电话</div>
                            <div className={styles.text}>{matchInfo.contact_phone || '暂无'}</div>
                        </div>
                        <div className={styles.horizontal}>
                            <div className={styles.label}>投递简历邮箱</div>
                            <div className={styles.text}>{matchInfo.contact_email || '暂无'}</div>
                        </div>
                        <div className={styles.horizontal}>
                            <div className={styles.label}>发布日期</div>
                            <div className={styles.text}>{matchInfo.release_time || '暂无'}</div>
                        </div>
                        <div className={styles.horizontal}>
                            <div className={styles.label}>招聘人数</div>
                            <div className={styles.text}>{matchInfo.recruit_num ? `${matchInfo.recruit_num}人` : '暂无'}</div>
                        </div>
                        <div className={styles.vertical}>
                            <div className={styles.label}>工作内容</div>
                            <div
                                className={styles.text}
                                dangerouslySetInnerHTML={{
                                    __html: matchInfo?.profession_desc ? matchInfo?.profession_desc?.replace(/\n/g, '<br/>') : '暂无',
                                }}
                            />
                        </div>
                    </div>
                </div>
                <div className={styles.box}>
                    <div className={styles.head}>匹配结果</div>
                    <div className={styles.content}>
                        <div className={styles.vertical}>
                            <div className={styles.label}>最终是否接受该岗位</div>
                            <div className={[styles.text, matchInfo.match_status === 1 ? styles.accept : styles.reject].join(' ')}>{matchInfo.match_status === 1 ? '接受' : '拒绝'}</div>
                        </div>
                        <div className={styles.vertical}>
                            <div className={styles.label}>{matchInfo.match_status === 1 ? '接受' : '拒绝'}理由</div>
                            <div
                                className={styles.text}
                                dangerouslySetInnerHTML={{
                                    __html: matchInfo?.match_reason?.replace(/\n/g, '<br/>'),
                                }}
                            />
                        </div>
                        <div className={styles.vertical}>
                            <div className={styles.label}>下一步行动</div>
                            <div
                                className={styles.text}
                                dangerouslySetInnerHTML={{
                                    __html: matchInfo?.next_action?.replace(/\n/g, '<br/>'),
                                }}
                            />
                        </div>
                    </div>
                </div>
            </div>
            <SafeArea position="bottom" />
        </div>
    )
}

export default observer(PostMatch)
